<template>
  <div class="rrrrr">
    <div class="boxssss">
      <div class="chartssss" id="chart1"></div>
    </div>
    <div class="boxssss2">
      <div class="chartssss" id="chart2"></div>
    </div>
    <div class="boxssss3">
      <div class="chartssss" id="chart3"></div>
    </div>
  </div>
</template>
  
  <script>
// @ is an alias to /src
import * as echarts from "echarts";

export default {
  name: "rrrrrd",
  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart3();
  },
  methods: {
    initChart1() {
      var chartDom = document.getElementById("chart1");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "今日采集任务",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["13:39", "13:44", "13:49", "13:59", "13:59", "14:04", "14:09"],
        },
        color: ['#2285E2'], // 深蓝色和黄色
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [66, 80, 122, 166, 159, 200, 300],
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    initChart2() {
      var chartDom = document.getElementById("chart2");
      var myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: "近一个月采集任务",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["在线填报", "离线填报"],
          right: '10'

        },
        color: ['#2285E2','#FC943C'], // 深蓝色和黄色

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00", "02", "04", "06", "08", "10", "12"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "在线填报",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "离线填报",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };
      myChart.setOption(option);
    },
    initChart3() {
      var chartDom = document.getElementById("chart3");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "近七天任务统计",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
        },
        color: ['#273AB5'], // 深蓝色和黄色
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: 16,
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0],
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
  <style scoped>
.rrrrr {
  background: url(../assets/rwjs.png) no-repeat top;
  background-size: cover;
  width: 100%;
  height: 1080px;
  position: relative;
}
.boxssss {
  width: 588px;
  height: 248px;
  border: 1px solid #d5d9e6;
  position: absolute;
  right: 50px;
  top: 200px;
  padding: 15px;
}
.boxssss2 {
  width: 588px;
  height: 248px;
  border: 1px solid #d5d9e6;
  position: absolute;
  right: 50px;
  top: 460px;
  padding: 15px;
}
.boxssss3 {
  width: 588px;
  height: 248px;
  border: 1px solid #d5d9e6;
  position: absolute;
  right: 50px;
  top: 720px;
  padding: 15px;
}
.chartssss {
  width: 100%;
  height: 248px;
}
</style>
  